<%-- 
    Document   : controlPanel
    Created on : 23/12/2011, 00:28:03
    Author     : alquad
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Dinotrack - Panel de Control</title>
        <html:form action="/error"></html:form>
        <html:form action="/controlPanel">
            <link href="controlPanelStyle.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
            <script type="text/javascript">
                
                function check_session_user() 
                {
                    var user = <%= session.getAttribute("USER")%>;
                    if (user==null) {
                        document.forms[0].submit();
                    }
                    //  alert('<%= session.getAttribute("USER")%>');
                }
                
                function show_cuenta(){ 
                    document.getElementById('cuenta').style.display = 'block';
                    document.getElementById('cancionesComentarios').style.display = 'none';
                
                <% session.setAttribute("LOAD_DATA", true);%>;
                        var user = '<%= session.getAttribute("USER")%>'; 
                        $.get("/WebDinotrack/editAccount.do", { nombre: user }, 
                        responseUserData);
                    }
                    
                    function responseUserData(data){ 
                        var user = $(data).find("user").text(); 
                        var password = $(data).find("password").text();
                        var name = $(data).find("name").text(); 
                        var lastName = $(data).find("lastName").text();
                        var email = $(data).find("email").text();
                        
                        alert(email);
                        
                        document.getElementByName("usuario").value = user;
                        document.getElementByName("contrasenia").value = password;
                        document.getElementByName("nombre").value = name;
                        document.getElementByName("apellido").value = lastName;
                        document.getElementByName("email").value = email;
                    }
                
                    function hide_cuenta() {
                        document.getElementById('cuenta').style.display = 'none';
                        show_comentarios_canciones();
                    }
                
                    function show_canciones_comentarios() {
                        document.getElementById('cancionesComentarios').style.display = 'block';  
                        hide_cuenta();
                    }
                
                    function hide_comentarios_canciones() {
                        document.getElementById('cancionesComentarios').style.display = 'none';
                        //  show_cuenta();
                    }
                
                    window.onload = check_session_user;
                
            </script>
        </head>
        <body>

            <div class="Encabezado">

                <div class="TituloControlPanel">
                    <span class="texto"> Dinotrack - Panel de Control </span>
                </div>

                <div class="EncabezadoIzquierda">
                    <html:submit value="Inicio" property="index" styleClass="awesome"/>
                </div>

            </div>

            <div class="CentralIzquierda">

                <div class="panelInfoUsuario">

                    <div class="panelInfoUsuarioImg">
                        <img src="img/dino-blue-icon.png" alt="Usuario" width="64" height="64" />
                    </div>

                    <div class="panelInfoUsuarioContent">

                        <p class="panelInfoUsuarioText">alquad<br />alberakd@gmail.com</p>
                            <html:errors property="userSession" />

                    </div>

                </div>

                <div class="panelAcciones">

                    <div class="panelAccionesBotones">
                        <nav>
                            <a class="large awesomeBtnList" title="Panel de Control" onclick="show_canciones_comentarios()">Panel de Control</a> 
                            <a class="large awesomeBtnList" title="Favoritos">Favoritos</a> 
                            <a class="large awesomeBtnList" title="Listas">Listas</a>
                            <a class="large awesomeBtnList" title="Mis Comentarios">Mis Comentarios</a>
                            <a class="large awesomeBtnList" title="Mi Cuenta" onclick="show_cuenta()">Mi Cuenta</a>                 
                        </nav>
                    </div>
                </div>

            </div>

            <div class="Central">

                <div class="panelEncabezadoCentral">

                </div>

                <div id="cuenta" class="miCuenta">

                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <span><blockquote class="triangle-isosceles left">
                                            <p style="font-size:16px">Para modificar los datos de usuario y de cuenta Dinotrack, </br> edite la
                                                información que se muestra a continuación.</p>
                                        </blockquote></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <html:form action="/editAccount">

                        <div class="tableDatosCuenta">
                            <p><span style="font-size: 24px;">Datos de Cuenta Dinotrack</span></p>
                            <table>
                                <tbody>
                                    <tr>
                                        <td><p>Nombre de Usuario:</p></td>
                                        <td><html:text property="usuario" styleClass="form-edit" /></td>
                                    </tr>
                                    <tr>
                                        <td><p>Contraseña:</p></td>
                                        <td><html:text property="contrasenia" styleClass="form-edit" /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="tableDatosCuenta">
                            <p><span style="font-size: 24px;">Datos Personales</span></p>
                            <table >
                                <tbody>
                                    <tr>
                                        <td><p>Nombre:</p></td> 
                                        <td><html:text property="nombre" styleClass="form-edit" /></td>
                                    </tr>
                                    <tr>
                                        <td><p>Apellido:</p></td>
                                        <td><html:text property="apellido" styleClass="form-edit" /></td>
                                    </tr>
                                    <tr>
                                        <td><p>Email:</p></td>
                                        <td><html:text property="email" styleClass="form-edit" /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </html:form>

                    <div class="miCuentaAcciones">
                        <a class="large awesomeBtnList" title="Cancelar" onclick="hide_cuenta()">Cancelar</a>
                        <html:submit value="Guardar" property="guardar" styleClass="large awesomeBtnList"/>
                    </div>

                </div> 

                <div id="cancionesComentarios">
                    <div class="panelCanciones">

                    </div>

                    <div class="panelComentarios">

                    </div>
                </div> 

                <div class="barraFija">

                </div>

            </div>
        </html:form>
    </body>
</html>
